<template>
	<view class="main">
		<!-- 若需显示自定义导航栏，需要在App.vue中引入Vue -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">商品详情</block>
		</cu-custom>

		<scroll-view scroll-y="true">
			<view>
				<swiper class="screen-swiper" :class="'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true"
				 interval="5000" duration="500">
					<swiper-item v-for="(item,index) in imageList" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>


				<view class="content">

					<!-- 价格栏及介绍 -->
					<view class="info">
						<view v-if="good.goodsIsPromote == 1" class="promoteView bg-gradual-red">
							<view class="priceArea">
								<text style="font-size: 14px; ">抢购价：</text>
								￥{{good.goodsPromotePrice}}
							</view>

							<view class="buyCount" style="display: flex; justify-content: space-between; font-size: 14px; text-align: right; margin-right: 15upx;padding-bottom: 10upx;">
								<view>
									原价：<text style="text-decoration: line-through;">￥{{good.goodsPrice}}</text>
								</view>

								<view>
									<text class="cuIcon-friend" style="margin-right: 10upx; "></text>
									{{good.goodsSoldAmount}}人已抢
								</view>
							</view>
						</view>


						<view v-if="good.goodsIsPromote == 0" class="price" style="font-size: 26px; color:#F37B1D; padding-top:10upx; padding-left: 10upx;display: flex; justify-content: space-between;">
							<view class="price">￥{{good.goodsPrice}}</view>
							<view style="font-size: 14px; color: #808080; margin-right: 30upx; margin-top: 25upx;">
								<text class="cuIcon-friend" style="margin-right: 10upx; "></text>
								{{good.goodsSoldAmount}}人已购
							</view>

						</view>
						<view class="name" style="font-size: 16px; color: #333333; padding: 15upx;">{{good.goodsName}}</view>

						<view class="tags">
							<text class="goodsTag text-green" v-if="good.goodsIsHelper == 1"><b>扶贫商品</b></text>
							<text class="goodsTag text-red" v-if="good.goodsIsPromote == 1"><b>促销商品</b></text>
							<text class="goodsTag text-blue" v-if="good.goodsIsHelper == 0"><b>日常用品</b></text>
							<text class="goodsTag text-blue" v-if="good.goodsIsBackScore == 1"><b>可获得扶贫积分</b></text>
							<text class="goodsTag text-orange" v-if="good.goodsIsUseScore == 1"><b>可使用扶贫积分</b></text>
						</view>

						<view class="desc" style="color: #999999; padding: 15upx;">{{good.goodsDescription}} </view>
					</view>

					<!-- 价格栏及介绍 -->


					<!-- 溯源登记 -->
					<view class="origin">
						<view class="originTitle" style="font-size: 16px; padding: 10upx; color: #555555;">
							<text class="cuIcon-location" style="margin-right: 10upx;"></text>
							<text>溯源登记</text>
						</view>

						<view class="orginContent" style="padding: 15upx;">
							<text>登记地址： {{good.goodsOrigin}}</text>
						</view>

						<navigator :url="'../origin/origin?id='+good.goodsId" v-if="good.goodsIsHelper == 1">
							<view class="originLabel" style="padding: 10upx 30upx 0upx 15upx;color: #999999; text-align: right; text-decoration: underline;">
								<text>点击查看溯源认证详细信息</text>
							</view>
						</navigator>

					</view>
					<!-- 溯源登记 -->

					<!-- 商品评价 -->
					<view class="comment">
						<view class="commentTitle" style="font-size: 16px; padding: 10upx; color: #555555;">
							<text class="cuIcon-comment" style="margin-right: 10upx;"></text>
							商品评价
						</view>

						<view class="commentContent">
							<view class="noneComment" v-if="evaluationList.length == 0" style="text-align: center;">
								<text style="color: #555555;">暂无评价哦~</text>
							</view>

							<view class="commentItem" v-for="evaluation in evaluationList">
								<view class="commentHead">
									<view>
										<text style="margin-right: 20upx;">{{evaluation.evaluationUserOpenid.slice(0,1)}}***{{evaluation.evaluationUserOpenid.slice(5,6)}}</text>
										<text v-for="count in parseInt(evaluation.evaluationStar)" class="cuIcon-favorfill text-orange"></text>
									</view>
									<view style="color: #555555;">
										{{evaluation.evaluationTime.year + 1900}}-{{evaluation.evaluationTime.month + 1}}-{{evaluation.evaluationTime.date}}
									</view>
								</view>
								<view class="commentInfo" style="color: #555555; padding-top: 10upx; padding-left: 15upx;">
									{{evaluation.evaluationContent}}
								</view>
							</view>

							<view class="commentSeeMore" v-if="evaluationList.length > 0" style="color: #999999;text-align: center;text-decoration: underline;padding-top: 15upx;">
								<navigator :url="'../evaluationList/evaluationList?id='+good.goodsId">
									点击查看更多精彩评价~
								</navigator>
							</view>

						</view>


					</view>
				</view>
			</view>
		</scroll-view>

		<view class="bottomBar">
			<view class="cu-bar bg-white tabbar border shop">
				<button class="action">
					<view class="cuIcon-home">
					</view>
					回首页
				</button>
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</button>


				<view class="bg-gradual-green submit" hover-class="navigator-hover" hover-start-time="0" hover-stay-time="200"
				 @click="toBuy">
					立 即 购 买
				</view>


			</view>
		</view>






	</view>
</template>

<script>
	import carousel from '../../components/vear-carousel.vue'
	import {
		isLogin,demo
	} from '../../utils/util.js'
	import {
		getGoodsInfoById
	} from '../../api/goodsAPI.js'
	import {
		getEvaluationTop2ByGoodsId
	} from '../../api/evaluationAPI.js'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				good: {},
				imageList: [
					// "http://2306.tech/CCShop/images/goods/FA0257/FA0257-0.jpg",
					// "http://2306.tech/CCShop/images/goods/FA0257/FA0257-1.jpg",
					// "http://2306.tech/CCShop/images/goods/FA0257/FA0257-2.jpg",
					// "http://2306.tech/CCShop/images/goods/FA0257/FA0257-3.jpg",
				],
				evaluationList: [
					// {
					// 	"evaluationUserOpenid": "o6E-Q4qEtfpEEkq1lWCwmtZ7YzpY",
					// 	"evaluationStar": 5,
					// 	"evaluationTime": {
					// 		"date": 18,
					// 		"hours": 15,
					// 		"seconds": 38,
					// 		"month": 10,
					// 		"timezoneOffset": -480,
					// 		"year": 119,
					// 		"minutes": 47,
					// 		"time": 1574063258000,
					// 		"day": 1
					// 	},
					// 	"evaluationFeedback": "",
					// 	"evaluationHomestayId": "",
					// 	"evaluationId": 39,
					// 	"evaluationType": "1",
					// 	"evaluationGoodsId": "FA0257",
					// 	"evaluationFeedbackTime": null,
					// 	"evaluationUserId": "",
					// 	"evaluationHasfeedback": "",
					// 	"evaluationOrderId": "H20190530182523094",
					// 	"evaluationContent": "香菇收到了，吃后感觉很有弹性，特别好吃！",
					// 	"evaluationImg": "",
					// 	"evaluationStatus": "1"
					// },
					// {
					// 	"evaluationUserOpenid": "o6E-Q4qEtfpEEkq1lWCwmtZ7YzpY",
					// 	"evaluationStar": "5",
					// 	"evaluationTime": {
					// 		"date": 18,
					// 		"hours": 15,
					// 		"seconds": 26,
					// 		"month": 10,
					// 		"timezoneOffset": -480,
					// 		"year": 119,
					// 		"minutes": 47,
					// 		"time": 1574063246000,
					// 		"day": 1
					// 	},
					// 	"evaluationFeedback": "",
					// 	"evaluationHomestayId": "",
					// 	"evaluationId": 38,
					// 	"evaluationType": "1",
					// 	"evaluationGoodsId": "FA0257",
					// 	"evaluationFeedbackTime": null,
					// 	"evaluationUserId": "",
					// 	"evaluationHasfeedback": "",
					// 	"evaluationOrderId": "H20190530182523094",
					// 	"evaluationContent": "香菇收到了，吃后感觉很有弹性，特别好吃！",
					// 	"evaluationImg": "",
					// 	"evaluationStatus": "1"
					// }
				]
			}
		},
		methods: {
			toBuy() {
				if (isLogin()) {
					uni.navigateTo({
						url: '../goodsOrderInput/goodsOrderInput?id=' + this.good.goodsId
					})
				}
			}
		},
		onLoad(params) {
			uni.showLoading({
				title: '加载中...'
			})
			if (!params.id) {
				console.log('商品详情页，params为空！')
				params.id = 'FA0257';
			}
			const app = getApp()
			getGoodsInfoById(params.id).then(resp => {
				console.log(resp)
				this.good = resp
				const arr = this.good.goodsImg.split(';')
				arr.forEach(s => {
					if (s != "") {
						this.imageList.push(app.globalData.serverUrl + s)
					}
				})
				uni.hideLoading()
			})

			getEvaluationTop2ByGoodsId(params.id).then(resp => {
				console.log(resp)
				this.evaluationList = resp
			})



		}
	}
</script>

<style>
	@import url("./goodsDetail.css");
</style>
